<!--
 * @Author: ZephyrGao
 * @Date: 2024-02-08 15:23:28
 * @Description: 系统登录页
 * Copyright (c) 2024 by ZephyrGao, All Rights Reserved. 
-->
<template>
  <a-flex style="height: 100%;">
    <div class="login-design">
      <div class="login-design-title">Fast vue3 快速开发框架</div>
      <div class="login-design-subtitle">
        作者: ZephyrGao
      </div>
    </div>
    <div class="login-form-content">
      <a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off"
        @finish="onFinish" @finishFailed="onFinishFailed">
        <a-form-item label="用户名" name="username"
          :rules="[{ required: true, message: 'Please input your username!' }]">
          <a-input v-model:value="formState.username" />
        </a-form-item>
        <a-form-item label="密码" name="password"
          :rules="[{ required: true, message: 'Please input your password!' }]">
          <a-input-password v-model:value="formState.password" />
        </a-form-item>
        <a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
          <a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
        </a-form-item>
        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
          <a-button type="primary" html-type="submit">登录</a-button>
        </a-form-item>
      </a-form>
    </div>
  </a-flex>

</template>

<script setup lang="ts">
import { reactive, onMounted } from 'vue';
interface LoginForm {
  username: string;
  password: string;
  remember: boolean;
}

const formState = reactive<LoginForm>({
  username: '',
  password: '',
  remember: true,
});

const onFinish = (values: any) => {
  console.log('Success:', values);
};

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};

// onMounted(() => {
//   debugger
//   console.log('onMounted');
// }),


</script>
<style lang="scss" scoped>
.login-design {
  height: 100%;
  flex: 2;
  @include flex-center;
  flex-direction: column;
  color: white;
  font-weight: 800;
  background: $primary-color;

  .login-design-title {
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 20px;
  }

  .login-design-subtitle {
    font-size: 24px;
    font-weight: 400;
  }
}

.login-form-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
